<template>
  <div>
    <el-card>
      <!--搜索框11-->
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input placeholder="请输入长者姓名" clearable v-model="name" @clear="search">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!--主体数据-->
      <template>
        <el-table
            :data="RecordList"
            style="width: 100%"
            :row-class-name="tableRowClassName"
        >
          <el-table-column
              label="编号"
              type="index"
              width="150">
          </el-table-column>
          <el-table-column
              prop="name"
              label="长者姓名"
              width="200">
          </el-table-column>
          <el-table-column
              prop="number"
              label="卡号"
              width="200">
          </el-table-column>
          <el-table-column
              prop="num"
              label="充值金额/元"
              width="200">
          </el-table-column>
          <el-table-column
              prop="date"
              label="充值日期"
              width="250">
          </el-table-column>
          <el-table-column
              label="支付方式"
              width="200"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.paymode == 1">现金</span>
              <span v-if="scope.row.paymode == 2">微信</span>
              <span v-if="scope.row.paymode == 3">支付宝</span>
              <span v-if="scope.row.paymode == 4">银行卡</span>
              <span v-if="scope.row.paymode == 5">收钱吧</span>
              <span v-if="scope.row.paymode == 6">其他</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="remark"
              label="备注"
              width="200">
          </el-table-column>
        </el-table>
      </template>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6 , 12, 24]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import {toRefs} from "vue";

export default {
  data() {
    return {
      RecordList: [],
      name: '',
      pageNum: 1,
      pageSize: 3,
      total: 0,
    };
  },
  methods: {
    //查询长者
    search() {
      this.pageNum = 1;
      this.initRecordList();
    },
    tableRowClassName({rowIndex}) {
      if (rowIndex === 0) {
        return 'white-row'; // 第一行为白色
      } else if (rowIndex % 4 === 1) {
        return 'warning-row'; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 2 === 0) {
        return ''; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 3 === 2) {
        return 'white-row'; // 第三行和每隔三行后的行为白色
      } else {
        return 'success-row'; // 每隔三行后的行为黄色
      }
    },
    //初始化查询外出申请数据
    initRecordList() {
      let url = "/record/list"
      this.$axios.get(url, {
        params: {
          name: this.name,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.RecordList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //改变条数查询
    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1;
      this.initRecordList();
    },
    //改变页数查询
    handleCurrentChange(now) {
      this.pageNum = now;
      this.initRecordList();
    },
  },
  created() {
    this.initRecordList();
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

</style>